<template>
    <div v-loading="loading" id="container" ref="container">
        <div class="list" v-for="(item) in state.showList" :key="item.index">
            <img :src="item.url" />
            <div class="content">
                <h3 class="name">{{ item.index }}-{{ item.name }}</h3>
                <p class="tip">{{ item.feature }}</p>
            </div>
        </div>
    </div>
    <div class="page">当前页：{{ state.page }}</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance();
const getList = () => {
    return proxy.$http({
        url: "http://rttop.cn/api/?day=4-4&type=html5",
        method: "GET"
    })
}
let loading = true;
let state = reactive({
    showList: [],
    page: 1
});
function splitPage(data) {
    let index = 0;// 从第0个位置开始分组
    const result = []; // 接收最终分组结果的数组
    const pageSize = 10; // 每组分组数量
    while (index < data.length) {
        result.push(data.slice(index, index + pageSize))
        index = index + pageSize
    }
    return result;
}
const renderList = async () => {
    const { data } = await getList();
    const result = splitPage(data);
    for (let i = 0; i <= result.length; i++) {
        setTimeout(() => {
            state.showList = [...state.showList, ...result[i]];
            // 用于显示页码值
            state.page = i + 1;
            // 加载完成后隐藏滚动条
            if (i == result.length - 1) {
                loading = false;
            }
        }, 1000 * i);
    }
}
onMounted(async () => {
    renderList()
})
</script>
<style scoped>
#container {
    height: 480px;
    overflow-y: scroll;
}

.list {
    border-bottom: solid 1px #ccc;
    display: flex;
    padding: 5px 0;
}

.list img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 50%;
    padding: 5px;
    border: solid 1px #eee;
}

.name {
    margin-top: 5px;
    font-size: 16px;
    color: #777
}

.tip,
.page {
    font-size: 13px;
    color: #777
}
</style>
